<template>
    <!-- 产品详情 -->
    <div style="height: fit-content;">
        <div class="wrap">

            <div style="width: fit-content;margin-right: 60px">
                <div style="width: 700px">
                    <el-carousel trigger="click"
                                 :interval="50000"
                                 height="700px">
                        <el-carousel-item v-for="(img, index) in imgArr" :key="index">
                            <img :src="prefix + img" alt="轮播图" class="img"><!-- width="937px" height="400px"-->
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>

            <!-- 右侧内容 -->
            <div style="margin-top: 50px">
                <div class="text">
                    <el-link :underline="false" class="title">{{ product.name }}</el-link>
                    <el-link :underline="false" type="info">{{ product.title }}</el-link>

                    <el-link :underline="false">{{ product.describe }}</el-link>
                    <el-link :underline="false" type="warning">{{ product.detail }}</el-link>
                    <el-link :underline="false" class="price" type="danger">{{ product.price }} 元</el-link>

                    <el-link :underline="false" type="success" style="font-size: 20px">库存：{{ product.specsStock }}</el-link>
                    <el-link :underline="false" v-if="productSpecs.state === 0" type="danger" style="font-weight: bold;font-size: 20px">该规格已经锁定！</el-link>

                </div>

                <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

                <div class="configure">
<!--                    <el-link :underline="false">{{ product.attributeList }}</el-link>
                    <el-link :underline="false">{{ configure }}</el-link>-->

                    <el-link :underline="false" type="info">规格参数</el-link>

                    <div v-for="(key, index) in Object.keys(this.attributeList)" :key="index">
                        <el-link :underline="false">{{ key }}</el-link>

                        <el-radio-group v-model="configure[key]"
                                        @change.native="getProductSpecs">
                            <el-radio-button

                                    :label="item"
                                    v-for="(item, index) in attributeList[key]" :key="index">
                                {{ item }}
                            </el-radio-button>
                        </el-radio-group>
                    </div>
                </div>

                <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

                <el-button type="success" plain @click="addCart">加入购物车</el-button>
            </div>

        </div>

 <!--       <ProductFooter></ProductFooter>-->
    </div>

</template>

<script>
    import settings from '@/settings'
    import ProductFooter from "@components/product/ProductFooter";
    import { getProductDetail, getProductSpecs, addCart } from "@/api/product";

    export default {
        name: "Product",
        components:{ProductFooter},
        data(){
            return{
                prefix : settings.prefix || 'https://mall-resource-bucket.oss-cn-hangzhou.aliyuncs.com',// 全局前缀

                imgArr: [],//产品图片数组
                attributeList: [],//转为json后的规格信息
                product: {},//产品信息
                productSpecs: {},//查询的产品规格信息
                configure: {},//选择的产品配置信息
            }
        },
        methods:{
            addCart(){
                if (this.$store.getters.isLogin){
                    console.log(this.productSpecs)
                    if (Object.values(this.configure).includes("")) {//如果没有选择具体规格，不可以添加购物车
                        this.$notify.warning({title: '失败',message: '请先选择一个规格'});
                    }else if (this.productSpecs.state === 0){
                        this.$notify.warning({title: '失败',message: '该规格已经被锁定，无法加入购物车'});
                    }else if (this.productSpecs.specsStock === 0){
                        this.$notify.warning({title: '失败',message: '该规格库存不足，无法加入购物车'});
                    } else {
                        console.log("加入购物车的规格id =",this.productSpecs.specsId)
                        addCart({ specsId: this.productSpecs.specsId}).then(response => {
                            console.log(response)
                            if (response.state === true) {
                                this.$notify.success({title: '成功',message: response.message, duration: 1500});
                            }else{
                                this.$notify.warning({title: '失败',message: response.message, duration: 1500});
                            }
                        })
                    }
                }else {
                    this.$notify.warning({title: '失败',message: '请先登录', duration: 1500});
                }
            },
            getProductSpecs(){// 获得产品规格信息
                console.log(Object.values(this.configure))
                if (Object.values(this.configure).includes("")) return;//如果没有选择具体规格，就返回
                const data = {
                    productId: this.product.productId,//产品id
                    productSpecs: JSON.stringify(this.configure),//产品规格，参数是json格式的规格信息
                }
                getProductSpecs(data).then(response => {
                    console.log(response)
                    if (response.state === true) {
                        if (response.data.productSpecs.state === 0){
                            this.$message.warning('该规格已经被锁定，无法购买！');
                        }
                        this.productSpecs = response.data.productSpecs// 保存产品规格
                        this.product.price = response.data.productSpecs.price// 展示价格
                        this.$set(this.product, 'specsStock', response.data.productSpecs.specsStock)// 根据查询的规格信息，新增库存属性
                        this.$notify.success({title: '成功',message: response.message, duration: 1500});
                    }else{
                        this.$notify.warning({title: '失败',message: response.message, duration: 1500});
                    }
                })
            },
            init(){// 初始化，获得产品spu信息
                getProductDetail(this.$route.params.productId).then(response => {
                    console.log(response)
                    if (response.state === true) {
                        this.product = response.data.product//保存产品信息
                        console.log(this.product)

                        this.attributeList = JSON.parse(this.product.attributeList)//将规格信息转为json，用来解析
                        console.log("转换的json =",this.attributeList)
                        console.log("所有的key =",Object.keys(this.attributeList))
                        Object.keys(this.attributeList).forEach((key) => {
                            this.$set(this.configure, key, '')
                        })
                        this.imgArr.push(this.product.mainImg)
                        this.imgArr = this.imgArr.concat(this.product.subImg.split(","))
                        console.log(this.imgArr)
                        this.$notify.success({title: '成功',message: response.message, duration: 1500});
                    }else{
                        this.$notify.warning({title: '失败',message: response.message, duration: 1500});
                    }
                })
            },
        },
        watch:{
        },
        beforeMount(){
            console.log("product路由参数productId =",this.$route.params.productId)
            this.init()
        },
    }

</script>

<style scoped>
    .wrap{
        width: 70vw;
        margin: 0 auto;
        margin-bottom: 200px;
        display: flex;
    }
    .el-carousel__item{
        display: flex;
        justify-content: center;
    }
    .el-carousel__item img{
        width: 100%;
        object-fit: contain;
    }

    .el-link{
        display: block;
        margin: 20px 0;
    }
    .title,.price{
        font-size: 25px;
        font-weight: bold;
    }

    /*左对齐*/
    .text .el-link, .configure .el-link{
        text-align: left;
    }

    @media (max-width: 1300px){
        .wrap{
            flex-direction: column;
        }
    }
</style>
